<template>
  <div class="string-tools-wide">
    <!-- 输入区 -->
    <div class="tool-col input-col">
      <h2>输入文本</h2>
      <div class="input-options">
        <label class="checkbox-label">
          <input type="checkbox" v-model="autoSplitComma">
          逗号分隔自动换行（自动去除每项前后单双引号和空格）
        </label>
      </div>
      <textarea 
        v-model="inputText" 
        placeholder="请输入要处理的文本，每行一个字符串"
        rows="16"
      ></textarea>
    </div>
    <!-- 选项区 -->
    <div class="tool-col options-col">
      <h2>处理选项</h2>
      <div class="option-group">
        <h3>主要处理方式（只能选一个）</h3>
        <label class="radio-label">
          <input type="radio" value="addSingleQuotes" v-model="mainOption">
          添加单引号和逗号 (SQL查询)
        </label>
        <label class="radio-label">
          <input type="radio" value="addDoubleQuotes" v-model="mainOption">
          添加双引号和逗号 (接口参数)
        </label>
        <label class="radio-label">
          <input type="radio" value="addComma" v-model="mainOption">
          加逗号
        </label>
        <label class="radio-label">
          <input type="radio" value="singleToDouble" v-model="mainOption">
          单引号替换为双引号
        </label>
        <label class="radio-label">
          <input type="radio" value="doubleToSingle" v-model="mainOption">
          双引号替换为单引号
        </label>
      </div>
      <div class="option-group">
        <h3>其他处理</h3>
        <label class="checkbox-label">
          <input type="checkbox" v-model="trimSpaces">
          去除前后空格
        </label>
      </div>
    </div>
    <!-- 输出区 -->
    <div class="tool-col output-col">
      <h2>处理结果</h2>
      <textarea 
        :value="outputText" 
        readonly
        rows="16"
      ></textarea>
      <button @click="copyToClipboard" class="copy-btn">复制到剪贴板</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

const inputText = ref('')
const outputText = ref('')

// 新增：逗号分隔自动换行
const autoSplitComma = ref(false)
// 主要处理方式（单选）
const mainOption = ref('')
const trimSpaces = ref(false)

// 逗号分隔自动换行处理
watch([inputText, autoSplitComma], ([val, auto]) => {
  if (auto) {
    // 以逗号分割，去除每项前后单双引号和空格，过滤空项
    const lines = val
      .split(',')
      .map(s => s.replace(/^['"]+|['"]+$/g, '').trim())
      .filter(s => s.length > 0)
    inputText.value = lines.join('\n')
  }
})

const processText = () => {
  if (!inputText.value.trim()) {
    outputText.value = ''
    return
  }

  let lines = inputText.value.split('\n')
  // 只过滤掉全是空白的行，但不主动trim内容
  lines = lines.filter(line => line.trim().length > 0)

  // 处理每一行
  lines = lines.map((line, idx, arr) => {
    let processedLine = line

    // 只有勾选时才去除前后空格
    if (trimSpaces.value) {
      processedLine = processedLine.trim()
    }

    // 主要处理方式互斥
    if (mainOption.value === 'addSingleQuotes') {
      processedLine = `'${processedLine}'` + (idx !== arr.length - 1 ? ',' : '')
    } else if (mainOption.value === 'addDoubleQuotes') {
      processedLine = `"${processedLine}"` + (idx !== arr.length - 1 ? ',' : '')
    } else if (mainOption.value === 'addComma') {
      processedLine = processedLine + (idx !== arr.length - 1 ? ',' : '')
    } else if (mainOption.value === 'singleToDouble') {
      processedLine = processedLine.replace(/'/g, '"')
    } else if (mainOption.value === 'doubleToSingle') {
      processedLine = processedLine.replace(/"/g, "'")
    }

    return processedLine
  })

  outputText.value = lines.join('\n')
}

// 自动监听输入和选项变化，实时处理
watch([inputText, mainOption, trimSpaces], processText)

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(outputText.value)
    ElMessage.success('已复制到剪贴板')
  } catch (err) {
    // 降级方案
    const textArea = document.createElement('textarea')
    textArea.value = outputText.value
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    ElMessage.success('已复制到剪贴板')
  }
}
</script>

<style scoped>
.string-tools-wide {
  display: flex;
  gap: 32px;
  max-width: 1400px;
  margin: 40px auto;
  padding: 0 32px;
}
.tool-col {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 24px;
  flex: 1 1 0;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.input-col textarea,
.output-col textarea {
  width: 100%;
  min-height: 200px;
  margin-top: 12px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 12px;
  resize: vertical;
  background: #f8f9fa;
}
.options-col {
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.option-group {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  margin-bottom: 10px;
}
.radio-label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 14px;
}
.radio-label input[type="radio"] {
  margin-right: 8px;
  transform: scale(1.2);
}
.checkbox-label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 14px;
}
.checkbox-label input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
}
.process-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 12px 0;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 18px;
  transition: background-color 0.3s;
}
.process-btn:hover {
  background: #2980b9;
}
.copy-btn {
  background: #27ae60;
  color: white;
  border: none;
  padding: 10px 0;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 16px;
  transition: background-color 0.3s;
}
.copy-btn:hover {
  background: #229954;
}
.input-options {
  margin-bottom: 10px;
}
@media (max-width: 1000px) {
  .string-tools-wide {
    flex-direction: column;
    gap: 20px;
    padding: 0 10px;
  }
  .tool-col {
    min-width: 0;
  }
}
</style> 